<template>
  <div class="Fg-steps" :style="{...newStyle,'--color':newStyle.color}">
    <el-steps :active="active" finish-status="success" v-bind="$attrs" v-on="$listeners">
      <el-step class="Fg-tips" v-for="item in list" :key="item.value" :title="item.label"></el-step>
    </el-steps>
    <div class="Fg-steps--content" v-for="(item,i) in list" :key="item.value" v-show="i==active">
      <form-row-container
        :list.sync="item.children"
        :font="newStyle.font"
        v-bind="$attrs"
        :border="false"
      />
    </div>
    <div class="Fg-steps--button">
      <el-button v-show="active!==0" size="small" @click="pre">上一步</el-button>
      <el-button v-show="active!==list.length-1" size="small" @click="next">下一步</el-button>
    </div>
  </div>
</template>
 
<script>
import { deepClone, toCamelCase } from "../../../utils/index";
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "form-steps",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    list: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      active: 0,
      deepClone,
      toCamelCase,
    };
  },
  methods: {
    pre() {
      this.active--;
    },
    next() {
      this.active++;
    },
  },

  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.active = this.list.findIndex((item) => item.value == newValue);
      },
    },
  },
};
</script>

<style lang="scss" >
@import "../../../styles/generator.scss";
.Fg-steps {
  // color: #303133;
  .Fg-steps--button {
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
  }
  .el-step__title.is-wait {
    color: var(--color);
  }
  .el-step__head.is-wait {
    // color: var(--color);
  }
  display: flex;
  flex-direction: column;
  .Fg-steps--content {
    overflow: auto;
  }
}
</style>